<template>
  <!-- PAGE CONTENT BEGINS -->
  <div>
    <p>
      <button v-on:click="list(1)" class="btn btn-white btn-warning btn-round">
        <i class="ace-icon fa fa-refresh bigger-120 blue"></i>
        刷新
      </button>
    </p>
    <paginations ref="paginations" v-bind:list="list"></paginations>
    <table id="simple-table" class="table  table-bordered table-hover">
      <thead>
      <tr>
        <th> ID </th>
        <th> 相对路径 </th>
        <th> 文件名 </th>
        <th> 后缀 </th>
        <th> 大小 </th>
        <th> 用途 </th>
        <!--断点上传测试显示数据-->
        <th> 已上传片数</th>
        <th> 大小</th>
        <th> 总片数</th>
        <th> key</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="file in files" :key="file.num">
          <td> {{file.id}} </td>
          <td> {{file.path}} </td>
          <td> {{file.name}} </td>
          <td> {{file.suffix}} </td>
          <td> {{file.size | formatFileSize}} </td>
          <td> {{FILE_USE | optionKV(file.use)}} </td>
        <td> {{file.shardIndex}} </td>
        <td> {{file.shardSize | formatFileSize}} </td>
        <td> {{file.shardTotal}} </td>
        <td> {{file.key}} </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import Paginations from "../../components/paginations";
export default {
  name: 'file-file',
  components: {Paginations},
  data: function (){
    return{
      //映射表单数据
      file: {},
      files: [],
      FILE_USE:FILE_USE,
    }
  },
  mounted:function (){
    let _this = this;
    _this.$parent.activeSidebar("file-file-sidebar");
    _this.list(1);
  },
  methods:{


    /**查询*/
    list(page){
      let _this = this;
      Loading.show();
      _this.$ajax.post(process.env.VUE_APP_SERVER + '/file/admin/file/list',{
        page:page,
        size:_this.$refs.paginations.size,
      }).then((response)=>{
        Loading.hide();
        console.log("查询文件列表结果：",response);
        let resp = response.data;
        _this.files = resp.content.list;
        _this.$refs.paginations.render(page,resp.content.total);
      })
    },
  }
}
</script>